<template>
    <div class="home">
        <van-nav-bar title="查看详情" left-text="返回" left-arrow border fixed @click-left="$router.go(-1)"/>
        <div style="height:50px"></div>
        <div class="title">
            基本信息
        </div>
        <div class="info-line">
            <div>员工姓名</div>
            <div>{{infoSource.worker_name}}</div>
        </div>
        <div class="info-line">
            <div>工种</div>
            <div>{{infoSource.type_work}}</div>
        </div>
        <div class="info-line">
            <div>工伤人员身份证号</div>
            <div>{{infoSource.work_card_number}}</div>
        </div>
        <div class="info-line">
            <div>理赔单号</div>
            <div>{{infoSource.claim_number}}</div>
        </div>
        <div class="info-line">
            <div>保险单号</div>
            <div>{{infoSource.order_no}}</div>
        </div>
        <div class="info-line">
            <div>理赔公司</div>
            <div>{{infoSource.company_name}}</div>
        </div>
        <div class="info-line">
            <div>性别</div>
            <div>{{infoSource.gender==1?'男':'女'}}</div>
        </div>
        <div class="info-line">
            <div>联系电话</div>
            <div>{{infoSource.contact_phone}}</div>
        </div>
        <div class="info-line">
            <div>出险地点</div>
            <div>{{infoSource.province}} {{infoSource.city}} {{infoSource.area}}</div>
        </div>
        <div class="info-line">
            <div>详细地址</div>
            <div>{{infoSource.address}}</div>
        </div>
        <div class="info-line">
            <div>出险日期</div>
            <div>{{infoSource.risk_time_d}} {{infoSource.risk_time_hm}}</div>
        </div>
        <div class="info-line">
            <div>受伤情况</div>
            <div>{{infoSource.injury}}</div>
        </div>
        <div class="info-line">
            <div>就诊医院</div>
            <div>{{infoSource.hospital}}</div>
        </div>
        <div class="info-line">
            <div>就诊费用</div>
            <div>{{infoSource.medical_expenses}}</div>
        </div>
        <div class="info-line">
            <div>门诊/住院</div>
            <div>{{infoSource.outpatient_inpatient}}</div>
        </div>
        <div class="info-line" v-if="infoSource.outpatient_inpatient!='门诊'">
            <div>科室</div>
            <div>{{infoSource.department}}</div>
        </div>
        <div class="info-line" v-if="infoSource.outpatient_inpatient!='门诊'">
            <div>病房号</div>
            <div>{{infoSource.ward_number}}</div>
        </div>
        <div class="info-line" v-if="infoSource.outpatient_inpatient!='门诊'">
            <div>病床号</div>
            <div>{{infoSource.bed_number}}</div>
        </div>

        <div class="info-line-img">
            <div>事故现场照片</div>
            <div>
                <img v-for="(item, index) in infoSource.image_one" @click="previewImg(infoSource.image_one,index)"
                     :key="index"
                     :src="item">
            </div>
        </div>
        <div class="info-line-img">
            <div>伤者受伤部位裸</div>
            <div>
                <img v-for="(item, index) in infoSource.image_two" @click="previewImg(infoSource.image_two,index)"
                     :key="index"
                     :src="item">
            </div>
        </div>
        <div class="info-line-img">
            <div>手持身份证与上身照</div>
            <div>
                <img v-for="(item, index) in infoSource.image_three" @click="previewImg(infoSource.image_three,index)"
                     :key="index"
                     :src="item">
            </div>
        </div>
        <div class="info-line-img">
            <div>身份证正反面</div>
            <div>
                <img v-for="(item, index) in infoSource.image_four" @click="previewImg(infoSource.image_four,index)"
                     :key="index"
                     :src="item">
            </div>
        </div>
        <div class="info-line-img">
            <div>手持身份证全身照</div>
            <div>
                <img v-for="(item, index) in infoSource.image_five" @click="previewImg(infoSource.image_five,index)"
                     :key="index"
                     :src="item">
            </div>
        </div>
        <div style="height: 10vh;"></div>
    </div>
</template>

<script>
    // @ is an alias to /src
    import headerItem from '@/components/header.vue'
    import {ImagePreview} from 'vant';

    export default {
        name: "editorClaim",
        data() {
            return {
                infoSource: {},
            };
        },
        components: {
            headerItem
        },
        methods: {
            getOrderInfo() {
                let params = {
                    token: localStorage.getItem('token'),
                    // wx_member_id: localStorage.getItem('wx_member_id'),
                    id: this.$route.query.id

                };
                this.$post("/api/compensate_order/detail", params)
                    .then(res => {
                        if (res.code == 1) {
                            this.infoSource = res.data.info
                        } else {
                            this.$Toast(res.msg);
                        }
                    }).catch(err => {
                });
            },
            // previewImg(imgs, index) {
            //     console.log(imgs,index,'哈哈哈哈哈哈哈哈哈')
            //     let imgArr = []
            //     imgArr.push(imgs)
            //     this.previewImgDialog = ImagePreview({
            //         images: imgArr,
            //         startPosition: index,
            //         onClose() {
            //         }
            //     });
            // },
            previewImg(item, index) {
                this.previewImgDialog = ImagePreview({
                    images: item,
                    startPosition: index,
                    closeOnPopstate: true,
                    onClose() {
                    }
                });
            },
        },
        created() {
            this.getOrderInfo()
        },

    }
</script>
<style scoped lang="less">
    .info-line {
        border-bottom: 1px solid #eee;
        margin: 0 16px;
        padding: 13px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;

        > div:nth-of-type(1) {
            width: 35vw;
            color: #777777;
        }

        > div:nth-of-type(2) {
            flex: 1;
            color: #333;
        }
    }

    .info-line-img {
        border-bottom: 1px solid #eee;
        margin: 0 16px;
        padding: 13px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;

        > div:nth-of-type(1) {
            width: 35vw;
            color: #777777;
        }

        > div:nth-of-type(2) {
            flex: 1;
            color: #333;

            > img {
                width: 50%;
            }
        }
    }

    .border-last:last-child {
        border: none;
    }
</style>
